<template>
  <uni-nav-bar title="预存车用尿素" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="bgm column" v-if="userInfo">
    <view>溶液存量</view>
    <view style="margin-top:15rpx;"><text style="font-size: 50rpx;">{{userInfo.amount}}</text>公斤</view>
  </view>
  <view class="package">
    <view class="space-between list" style="background:#D7E8F5">
      <view>提货地</view>
      <view>溶液存量(公斤)</view>
    </view>
    <view class="space-between list" v-for="item in userInfo.physical" :key="item.id">
      <view>{{item.region_name}}</view>
      <view>{{item.amount}}</view>
    </view>
  </view>
  <view class="package">
    <view>成吨购更优惠</view>
    <view class="space-between" style="font-size: 24rpx;margin-top:10rpx;">
      <view>{{amount_name}}地区：{{unitPrice}}元/吨</view>
      <view @click="areaOpen()">更多地区 <uni-icons type="forward" size="15"></uni-icons></view>
    </view>
    <view class="space-between">
      <view class="column active" v-for="(item,index) in list"
        :style="{background:index===active?'#1D8DFF':'',color:index===active?'#fff':''}"
        @click="change(item.amount,index)">
        <view>{{item.text}}</view>
        <view>{{item.money}}元</view>
      </view>
    </view>
    <view class="but" @click="orders()">微信支付</view>
  </view>
  <!-- 明细筛选 -->
  <AccountOrder ref="account"></AccountOrder>
  <!-- 地区价 -->
  <areaList ref="area"></areaList>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import AccountOrder from '@c/order/accountOrder.vue';
  import areaList from '@c/account/area.vue';
  import { ref } from 'vue';
  import { getAmountRechargePriceGroup } from '@/gql/warehouse';
  import { onLoad } from '@dcloudio/uni-app';
  import { showLoading, showToast, errorToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  /**
   * 充值车用尿素主页
   * @param list 可选充值列表信息
   * @param active 可选充值列表信息索引
   * @param area 地区价弹框
   * @param amount 充值的加注公斤数
   * @param amount_id 地区ID
   * @param amount_name 地区名称
   * @param unitPrice 地区单价
   * @param account 溶液存量明细
   */
  const userInfo = useUserStore();
  const driver_id = getDriverID();
  const list = ref([])
  const active = ref(0)
  const area = ref(null)
  const amount = ref(0)
  const amount_id = ref()
  const amount_name = ref()
  const unitPrice = ref()

  const account = ref(null)
  onLoad((pearm) => {
    amount_id.value = Number(pearm.id)
    amount_name.value = pearm.name
    userInfo.inventory(driver_id);
    userInfo.Physicalamounte(driver_id);
    init()
  })
  /**
   * 获取当前地区充值信息
   */
  function init() {
    showLoading()
    const payload = {
      query: getAmountRechargePriceGroup,
      variables: {
        id: amount_id.value
      },
    };
    toPublish(
      'ql/driver/getAmountRechargePriceGroup',
      payload,
      (obj : any) => {
        const { getAmountRechargePriceGroup } = obj.data;
        list.value = getAmountRechargePriceGroup
        unitPrice.value = list.value && list.value.length > 0 ? list.value[0].money : '--'
        amount.value = list.value && list.value.length > 0 ? list.value[0].amount : '0'
      }
    );
  }
  /**
   * 切换选中加注信息
   * @param {Number} amoun 加注公斤数
   * @param {Number} index 选中的索引信息
   */
  function change(amoun : number, index : number) {
    amount.value = amoun
    active.value = index
  }
  //提交订单
  function orders() {
    showLoading()
    const payload = {
      driver_id,
      city_id: amount_id.value,
      method: 'mp',
      amount: amount.value
    };
    toPublish(
      'driver/addAmountRechargeOrder',
      payload, submit);
  }
  //提交支付
  function submit(obj : any) {
    if (obj.code !== 1) {
      errorToast(obj.msg)
      return
    }
    showLoading()
    const payload = {
      order_id: obj.data.order_id,
      method: 'mp',
    };
    toPublish(
      'driver/payAmountRechargeOrder',
      payload, weach);
  }
  /**
   * 微信支付
   */
  function weach(num : any) {
    showLoading();
    WeixinJSBridge.invoke('getBrandWCPayRequest', num.data, function (res) {
      switch (res.err_msg) {
        case 'get_brand_wcpay_request:ok':
          showToast('支付成功');
          showLoading()
          setTimeout(() => {
            userInfo.inventory(driver_id);
            userInfo.Physicalamounte(driver_id);
            account.value.renew()
          }, 1500);
          break;
        case 'get_brand_wcpay_request:cancel':
          errorToast('取消支付 请稍后重试');
          break;
        case 'get_brand_wcpay_request:fail':
          errorToast('支付失败 请稍后重试');
          break;
      }
    });
  }
  /**
   * 打开地区价弹框
   */
  function areaOpen() {
    area.value.open()
  }
</script>
<style scoped lang="less">
  .bgm {
    background-image: url(https://admin.anlan.tech/uploads/20221023/aa78cfcec92006930c355b1305a5dbaf.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
    width: 96%;
    margin: 15rpx auto;
    height: 178rpx;
    color: white;
    letter-spacing: 2rpx;
  }

  .list:nth-child(odd) {
    background: #F1F1F1;
  }

  .list {
    view {
      width: 50%;
      text-align: center;
      padding: 15rpx 0px;
      box-sizing: border-box;
    }
  }

  .active {
    width: 210rpx;
    height: 96rpx;
    border: 1px solid #1F93FF;
    border-radius: 10rpx;
    text-align: center;
    color: #1D8DFF;
    margin: 20rpx 0px 40rpx;

    view:nth-of-type(2) {
      font-size: 24rpx;
    }
  }

  .but {
    width: 652rpx;
    height: 91rpx;
    background: #1D8DFF;
    border-radius: 10rpx;
    text-align: center;
    line-height: 91rpx;
    color: #fff;
  }

  .detail {
    padding: 10rpx 0px;
    box-sizing: border-box;
  }
</style>